import { api } from "@/utils/api-instance";
import { usePageHelper } from "@/hook";
import { Dictionaries } from "@/apis/__generated/model/enums/DictConstants";
import "./wallet-record.scss";

export default function WalletRecord() {
  const { dataList } = usePageHelper(
    api.walletRecordForFrontController.query,
    api.walletRecordForFrontController,
    { query: {}, pageSize: 10, pageNum: 1 },
    { enableShowLoad: true },
  );

  return (
    <div className="wallet-list">
      {dataList.length ? (
        dataList.map((row) => (
          <div className="wallet-row" key={row.id}>
            <div className="row">
              <div className="label">变动金额：</div>
              <div className="value">{row.amount}</div>
            </div>
            <div className="row">
              <div className="label">剩余金额：</div>
              <div className="value">{row.balance}</div>
            </div>
            <div className="row">
              <div className="label">变动类型：</div>
              <div className="value">
                {Dictionaries.WalletRecordType[row.type].keyName}
              </div>
            </div>
            <div className="row">
              <div className="label">原因：</div>
              <div className="value">{row.description}</div>
            </div>
            <div className="row">
              <div className="label">时间：</div>
              <div className="value">{row.createdTime}</div>
            </div>
          </div>
        ))
      ) : (
        <div className="empty">暂无数据</div>
      )}
    </div>
  );
}
